<template>
    <div class="h-wrapper">
        <div class="s-wrapper">
            <p>热门职位</p>
            <div v-for="item in hotWorks" class="work-item">
                <a href="#">{{item}}</a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "searchBottom",
        data(){
            return{
                hotWorks:["java","产品经理","web前端","运维工程师"]
            }
        },
    }
</script>

<style scoped lang="less">
    .h-wrapper{
        display: flex;
        justify-content: center;
    }
    .s-wrapper{
        height: 20px;
        line-height: 20px;
        width: 935px;
        display: flex;
        overflow: hidden;
        font-size: 12px;
    }
    p{
        color: #9FA3AF;
    }
    .work-item{
        margin-left: 20px;
        color: #5DD5C8;
    }
    .work-item:hover{
        cursor: pointer;
    }
    a{
        text-decoration: none;
        color: #5DD5C8;
    }
</style>